<template>
  <main class="wss-container">
    <div class="label-box-content">
      <el-row :gutter="24" type="flex">
        <el-col :span="10" class="contractAudit-Box">
          <NewCard :title="title" :isright="true">
            <template slot="right">
              <svg-icon icon-class="fx_icon" class="shareBtn" @click="isShowCard=true"/>
              <ShareBox :thisContentUrl="thisContentUrl" :isShowCard.sync="isShowCard"></ShareBox>
            </template>

            <!-- 审核状态切换 -->
            <div class="auditBox">
              <!-- 1审核上传合同 -->
              <div class="uploadBox" v-if="auditState == 1">
                <img src="~@/assets/images/htzs_img.png" alt="" />
                <p>
                  新一代合同智能审批流程，在线修订留痕、OCR<br />文本对比、风险语义提取、智能评审等功能
                </p>
                <p>开箱即用，跳出效率低谷。</p>
                <el-upload
                  :on-change="change"
                  :auto-upload="autoUpload"
                  class="upload-demo"
                  :action="`${address}/base/contractVerify/aiVerify`"
                  multiple
                  :limit="1"
                  :file-list="fileList"
                  ref="upload"
                  :headers="headers"
                  :before-upload="onUpload"
                  :on-success="upoloadSuccess"
                  :on-error="upoloadErr"
                  accept=".jpg, .png, .pdf,.docx"
                >
                  <el-button round>上传合同文件</el-button>
                </el-upload>
                <span>仅支持jpg、png、pdf、docx格式的简体中文文件</span>
              </div>
              <!-- 2审核中 -->
              <div class="inReview" v-else-if="auditState == 2">
                <div class="progressBar">
                  <el-progress
                    type="circle"
                    :percentage="progressPercent"
                    :stroke-width="14"
                    color="#BBBAC2"
                  ></el-progress>
                  <p>{{ filename }}</p>
                  <span>{{ repot }}</span
                  ><br />
                  <span v-if="showspan">支付成功后查看报告</span>
                  <div v-if="error">
                    <span>审核失败</span>
                    <el-button @click="reaudit" round>重新审核</el-button>
                  </div>
                </div>
              </div>
              <!-- 3审核完成 -->
              <div class="reviewOk" v-else>
                <div class="progressBar">
                  <el-progress
                    type="circle"
                    :percentage="100"
                    :stroke-width="14"
                    color="#BBBAC2"
                  ></el-progress>
                  <p>{{ filename }}</p>
                  <span>审核完成</span>
                  <el-button @click="onemore" round>再审一份</el-button>
                </div>
              </div>
            </div>
          </NewCard>
        </el-col>
        <el-col :span="14">
          <div class="auditResult" v-if="showpay == 3">
            <AuditResult :auditdata="auditdata"></AuditResult>
          </div>
          <div class="featuredContent" v-if="showpay == 1">
            <FeaturedContent></FeaturedContent>
          </div>
          <div v-if="showpay == 2">
            <Pay
              @showFeatured="showFeatured"
              @repotdata="repotdata"
              :reviewpay="reviewpay"
            ></Pay>
          </div>
          <!-- <div v-if="showpay == 3">
            <GetReport @changeStatus="test"></GetReport>
          </div> -->
        </el-col>
      </el-row>
    </div>
  </main>
</template>

<script>
import AuditResult from "./auditResult.vue";
import FeaturedContent from "@/components/FeaturedContent/index.vue";
import Simulation from "../simulation/index.vue";
import GetReport from "../simulation/getReport.vue";

// 分享的组件
import ShareBox from "@/components/shareBox/index.vue"

import NewCard from "@/wss/components/newCard.vue";
import {
  contractreview,
  getscontractifPurchase,
} from "@/BMViews/api/contract/index.js";

import Pay from "./Pay.vue";
import { getToken } from "@/utils/auth.js";
export default {
  name: "ContractAudit",
  components: {
    NewCard,
    FeaturedContent,
    AuditResult,
    Simulation,
    Pay,
    GetReport,
    ShareBox
  },
  data() {
    return {
      isShowCard: false,//分享按钮的显示隐藏
      thisContentUrl: '',//分享的链接

      error: false,
      showspan: false,
      repot: "文件审核中，约10分钟完成...",
      reviewpay: {}, //合同审核返回的数据
      esId: "", //订单ESid
      id: "", //訂單ID
      title: this.$route.meta.title, //路由名称
      address: process.env.VUE_APP_BASE_API,
      auditState: 1, //，1审核上传合同界面 2审核中界面
      auditdata: {}, //审核报告
      showpay: 1, //默认推荐
      autoUpload: true,
      progressPercent: 0,
      headers: {
        Authorization: getToken(),
      },
      fileList: [], //上传的合同文件
      filename: "",
      timer:null,
      finishtimer:null
    };
  },
  mounted() {
    this.getShareLink()// 获取当前项目的分享链接
    
    window.addEventListener("offline", () => {
      console.log("你好啊");
    });
    this.$bus.$on("tofather", (item, e) => {
      this.showpay = e;
    });
  },


  watch: {
    //监听时间
      progressPercent: {
       handler(newVal) {
        if (newVal==100) {
            clearInterval(this.finishtimer);
           clearInterval(this.timer);
          
        } 
    
      },
    },

  },
  methods: {
    // 获取当前项目的分享链接
    getShareLink(){
      let href = window.location.host //获取当前域名 不带http://
      let route = this.$route.fullPath
      this.thisContentUrl = `http://${href}${route}`
    },

    //倒计时结束返回推荐页
    showFeatured() {
      this.showpay = 0;
    },
    //生成合同报告
    repotdata(e, i) {
      this.auditState = 3;
      this.showpay = 3;
      this.auditdata = e;
      // console.log(e, "123456");
      // console.log(i, "789654321");
    },
    //上传文件时触发
    onUpload(file, fileList) {
      this.filename = file.name;
      this.showspan = false;
      //使用定时器来制作进度条
      this.timer = setInterval(() => {
        this.progressPercent++;
        //以到75%就结束定时器（模拟的一个过渡时间）
        if (this.progressPercent == 75) {
          clearInterval(this.timer);
          this.timer = null;
        }
      }, 1000);
      // console.log(this.timer, "111111111111111111-------------------");
    },
    //上传成功时候的回调
    async upoloadSuccess(res, file, fileList) {
      // 隐藏错误按钮
      this.error = false;
      this.repot = "文件审核中，约10分钟完成...";
      //三个参数看情况使用
      // 清除上传文件列表
      // console.log(res, "res");

      res = JSON.parse(JSON.stringify(res));
      // 必须在上传成功之后 进度条继续++
      if (res.code == 200) {
        // 创建一个完成后的定时器，会在progressPercent = 75 的基础上继续增加
        this.finishtimer = setInterval(() => {
          if (this.progressPercent < 100) {
            this.progressPercent++;
            if (this.progressPercent >= 100) {
              this.repot = "文件审核完成";
              this.showspan = true;
              clearInterval(this.finishtimer);
              clearInterval(this.timer);
              //审核成功，跳转支付界面
              this.showpay = 2;
              //清空定时器
              this.finishtimer = null;
              // 进度条停在0
              this.esId = res.orderId;
              this.id = res.esId;
              this.reviewpay = res;
              //查询是否购买
              // this.getifPurchasefn(res.esId);
            }
          } else {
            if (this.progressPercent >= 100) {
              this.repot = "文件审核完成";
              this.showspan = true;
              clearInterval(this.finishtimer);
              clearInterval(this.timer);
              //审核成功，跳转支付界面
              this.showpay = 2;
              //清空定时器
              this.finishtimer = null;
              // 进度条停在0
              this.esId = res.orderId;
              this.id = res.esId;
              this.reviewpay = res;
              //查询是否购买
              // this.getifPurchasefn(res.esId);
            }
          }
        }, 100);
      } else {
        this.$message({
          message: res.msg,
          type: "error",
        });
        // console.log(this.timer, "-------------------");
        this.repot = "";
        this.error = true;
        this.showspan = false;
        clearInterval(this.finishtimer);
        clearInterval(this.timer);
      }
    },
    //查询是否购买
    // async getifPurchasefn(id) {
    //   let params = {
    //     esId: id,
    //     type: "20",
    //     // title: item.name,
    //   };
    //   let data = await (params);
    //   if (data.code == 200) {
    //     this.reviewpay = data;
    //     data.name = this.filename;
    //     data.esId = this.esId;
    //     data.id = this.id;

    //     this.showpay = 2;
    //   }
    // },
    // 在审核一份
    onemore() {
      clearInterval(this.finishtimer);
      clearInterval(this.timer);
       this.repot= "文件审核中，约10分钟完成...",
      this.error=false
      this.progressPercent = 0;
      this.auditState = 1;
      this.showpay = 1;
    },
    // 重新审核
    reaudit() {
      clearInterval(this.finishtimer);
      clearInterval(this.timer);
      this.repot= "文件审核中，约10分钟完成...",
      this.error=false
      this.progressPercent = 0;
      this.auditState = 1;
      this.showpay = 1;
    
    },

    //上传失败
    upoloadErr() {
      this.$message({
        message: "上传失败请重新上传",
        type: "error",
      });
      this.auditState = 1;
    },
    change() {
      this.auditState = 2;
    },
  },
};
</script>

<style scoped>
/* 高度 */
::v-deep .label-box-content,
::v-deep .label-box-content .el-row,
::v-deep .label-box-content .el-col,
::v-deep .label-box-content .el-col > div,
::v-deep .label-box-content .el-card,
::v-deep .label-box-content .el-card__body {
  height: 100%;
}
::v-deep .el-card__body {
  position: relative;
  padding: 0 30px;
}
::v-deep .el-card__body > div {
  height: 92%;
  overflow-y: auto;
}
::v-deep .label-box-content .el-card__body > div::-webkit-scrollbar {
  width: 0px;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pd30 {
  padding: 0 30px;
}

/* 分享按钮 */
.contractAudit-Box >>> .top{
  position: relative;
}
.shareBtn{
  font-size: 16px;
  color: #999;
  cursor: pointer;
}

/* 一级 */
.tabOne {
  display: flex;
  justify-content: space-evenly;
  border: 1px solid #e5e6e9;
  background-color: #f9f9f9;
  border-radius: 12px;
  padding: 26px 0;
  margin-top: 15px;
}
.tabOne .tablist {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.tabOne .tablist img {
  width: 36px;
}
.tabOne .tablist img.imgsel {
  display: none;
}
.tabOne .tablist.isActive img.imgsel {
  display: block;
}
.tabOne .tablist.isActive img.imgnor {
  display: none;
}

.tabOne .tablist button {
  color: #686975;
  font-size: 16px;
  font-weight: bold;
  background-color: transparent;
  border: 2px solid #c8cce2;
  padding: 6px 20px;
  margin-top: 18px;
}
.tabOne .tablist::before {
  content: "";
  display: none;
  position: absolute;
  bottom: -26px;
  width: 0;
  height: 0;
  border-bottom: 12px solid #e5e6e9;
  border-top: 20px solid transparent;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
}
.tabOne .tablist::after {
  content: "";
  display: none;
  position: absolute;
  bottom: -27px;
  width: 0;
  height: 0;
  border-bottom: 12px solid #fff;
  border-top: 20px solid transparent;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
}

.tabOne .tablist.isActive button,
.tabOne .tablist button:hover {
  color: #fff;
  background-color: #39486f;
  border-color: #39486f;
}
.tabOne .tablist.isActive::before {
  display: block;
}
.tabOne .tablist.isActive::after {
  display: block;
}

/* 智审状态 ************ */
/* 1上传合同 */
.auditBox {
  margin: 50px 0;
}
.uploadBox {
  width: 100%;
  margin: 0 auto;
}
.uploadBox img {
  display: block;
  width: 170px;
  margin: 0 auto;
  margin-bottom: 30px;
}
.uploadBox p {
  font-size: 14px;
  line-height: 28px;
  color: #333;
  text-align: center;
  margin: 0;
}
::v-deep .uploadBox .el-upload {
  display: block;
  margin: 0 auto;
  margin-top: 30px;
}
.uploadBox .el-button {
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  padding: 10px 50px;
}
.uploadBox > span {
  display: block;
  color: #bababa;
  font-size: 12px;
  text-align: center;
  margin-top: 30px;
}

/* 2审核中 */
.progressBar {
  text-align: center;
}
::v-deep .progressBar .el-progress .el-progress__text {
  color: #f87a23;
}
.progressBar p {
  font-weight: bold;
  font-size: 18px;
  color: #333;
  margin: 0;
  margin-top: 50px;
  margin-bottom: 15px;
}
.progressBar span {
  font-size: 12px;
  color: #bababa;
}
/* 审核完成 */
.progressBar .el-button {
  display: block;
  margin: 0 auto;
  margin-top: 30px;
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  padding: 10px 50px;
}
</style>